import cs from 'classnames';
import dayjs, { Dayjs } from "dayjs";
import { CSSProperties, ReactNode } from "react";
import LocaleContext from './Calendar/localeContext';
import { MonthCalender } from './MonthCalendar';
interface CalendarProps {
    value: Dayjs,
    locale?: string,
    className?: string | string[],
    style?: CSSProperties,
    onChange?: (day: Dayjs) => void,
    dateRender?: (currentDate: Dayjs) => ReactNode
    dateInnerContent?: (currentDate: Dayjs) => ReactNode
}

function Header () {
    return <div className="calendar-header-left">
        <div className="calendar-header-icon">&lt;</div>
        <div className="calendar-header-value">2023 年 11 月</div>
        <div className="calendar-header-icon">&gt;</div>
        <button className="calendar-header-btn">今天</button>
    </div>
}


function Calendar (props: CalendarProps) {
    const {
        className,
        style,
        value,
        locale,
    } = props
    const classNames = cs('calendar', className)
    return <LocaleContext.Provider value={{
        locale: locale || navigator.language
    }}>
        <div className={classNames} style={style}>
            <Header></Header>
            <MonthCalender {...props}/>
        </div>
    </LocaleContext.Provider>
}


function App() {
    return <Calendar 
        value={dayjs('2025-03-13')} 
        className={'aaa'} 
        dateInnerContent={
            (value) => {
                return <div>
                    <p style={{
                        background: 'yellowgreen',
                    }}
                    >
                        { value.format('YYYY/MM/DD') }
                    </p>
                </div>
            }
        }
        // 传递zh-CN或者en
        locale='zh-CN' 
    ></Calendar>
}
export default App;
